<template>
  <div class="nav">
    <router-view class="main"></router-view>
    <van-tabbar route class="foot" inactive-color='#1989fa' :fixed="false">
      <van-tabbar-item :to="{name:'shouYe'}">
        <span>首页</span>
        <img
          slot="icon"
          slot-scope="props"
          :src="props.active ? icon.active : icon.inactive"
        >
      </van-tabbar-item>

      <van-tabbar-item :to="{name:'caiDan'}">
        <span>菜单</span>
        <img
          slot="icon"
          slot-scope="props"
          :src="props.active ? icon.active1: icon.inactive1"
        >
      </van-tabbar-item>

      <van-tabbar-item :to="{name:'dingDan'}">
        <span>订单</span>
        <img
          slot="icon"
          slot-scope="props"
          :src="props.active ? icon.active2 : icon.inactive2"
        >
      </van-tabbar-item>

      <van-tabbar-item :to="{name:'Cart'}">
        <span>购物车</span>
        <img
          slot="icon"
          slot-scope="props"
          :src="props.active ? icon.active3: icon.inactive3"
        >
      </van-tabbar-item>

      <van-tabbar-item :to="{name:'Me'}">
        <span>我的</span>
        <img
          slot="icon"
          slot-scope="props"
          :src="props.active ? icon.active4 : icon.inactive4"
        >
      </van-tabbar-item>
    </van-tabbar>

  </div>
</template>

<script>
export default {
  data(){
    return{
      icon:{
        active:'http://www.sunlulu.club/img/1.png',
        inactive:'http://www.sunlulu.club/img/2.png',
        active1:'http://www.sunlulu.club/img/3liang.svg',
        inactive1:'http://www.sunlulu.club/img/3.svg',
        active2:'http://www.sunlulu.club/img/4liang.svg',
        inactive2:'http://www.sunlulu.club/img/4.svg',
        active3:'http://www.sunlulu.club/img/5liang.svg',
        inactive3:'http://www.sunlulu.club/img/5.svg',
        active4:'http://www.sunlulu.club/img/6liang.svg',
        inactive4:'http://www.sunlulu.club/img/6.svg',
      }
    }
  }
}
</script>
<style scoped>
  .nav {
    overflow: hidden;
    width:100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .main{
    flex: 1;
    height: 100%;
  }
.main{
  flex: 1;
  overflow: hidden;
}
</style>
